<template>
  <div class="box">
    <div>
      <div class="tabBox">
        <!-- 地址 -->
        <!-- 多条件筛选 -->
        <!-- <div class="condition">
          <div class="conditionTop">
            <div @click="flag1()">全部城区</div>
            <div @click="flag2()">价格00</div>
            <div @click="flag3()">距离</div>
            <div @click="flag4()">更多</div>
          </div>
          <div class="conditionCon">
            <div class="area" v-show="areaflag">
              <span v-for="item in area" :key="item.areaid">
                {{ item.areaname }}
              </span>
            </div>
            <div class="priceTop" v-show="priceTopflag">
              <span v-for="item in area" :key="item.areaid">
                {{ item.areaname }}价格
              </span>
            </div>
            <div class="distance" v-show="distanceflag">
              <span v-for="item in area" :key="item.areaid">
                {{ item.areaname }}距离
              </span>
            </div>
            <div class="more" v-show="moreflag">
              <span v-for="item in area" :key="item.areaid">
                {{ item.areaname }}更多
              </span>
            </div>
          </div>

        </div> -->
        <!-- 热门新盘 -->
        <div class="cate">
          <span
            v-for="item in cate"
            :key="item.id"
            @click="cateBtn(item.id)"
            :class="item.id == cateIndex ? 'active' : ''"
            >{{ item.name }}</span
          >
        </div>
      </div>
      <!-- 列表数据 -->
      <div class="newItem" v-for="item in newList" :key="item.id">
        <div class="newItemL">
          <img :src="item.img" alt="" />
        </div>
        <div class="newItemR">
          <div class="title">
            <span>{{ item.title }}</span>
            <span
              :class="
                item.status_name == '在售' ? 'status_name' : 'status_name2'
              "
              >{{ item.status_name }}</span
            >
          </div>
          <div class="areaname">{{ item.areaname }}</div>
          <div class="build_type">
            <span v-for="(item1, index) in item.build_type" :key="index">{{
              item1
            }}</span>
          </div>
          <div class="price">
            <span>{{ item.build_price }}</span>
            <span>{{ item.price_unit }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import newHouseList from "../../static/json/newhouse.json";
import addressList from "../../static/json/address.json";
export default {
  data() {
    return {
      //新房数据 cate_id
      list: newHouseList,
      //筛选数据
      cate: addressList.cate,
      cateIndex: 0,
      //筛选数据
      newList: [],
      //城区数据
      // area: addressList.area,
      // //价格数据
      // priceTop: addressList.price,
      // //距离数据
      // distance: addressList.distance,
      // //更多数据
      // // more: addressList.area,
      // //城区 显示隐藏
      // areaflag: false,
      // //价格 显示隐藏
      // priceTopflag: false,
      // //距离 显示隐藏
      // distanceflag: false,
      // //更多 显示隐藏
      // moreflag: false,
    };
  },

  mounted() {
    console.log(this.area);
    this.cateBtn(this.cateIndex);
  },
  methods: {
    // 城区
    // flag1() {
    //   this.areaflag = !this.areaflag;
    //   this.priceTopflag = false;
    //   this.distanceflag = false;
    //   this.moreflag = false;
    // },
    // flag2() {
    //   this.priceTopflag = !this.priceTopflag;
    //   this.areaflag = false;
    //   this.distanceflag = false;
    //   this.moreflag = false;
    // },
    // flag3() {
    //   this.distanceflag = !this.distanceflag;
    //   this.priceTopflag = false;
    //   this.areaflag = false;
    //   this.moreflag = false;
    // },
    // flag4() {
    //   this.moreflag = !this.moreflag;
    //   this.priceTopflag = false;
    //   this.distanceflag = false;
    //   this.areaflag = false;
    // },
    //热门楼盘
    cateBtn(id) {
      this.cateIndex = id;
      if (this.cateIndex) {
        this.newList = this.list.filter((item) => item.cate_id.includes(id));
        console.log(this.newList);
      } else {
        this.newList = this.list;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  > div {
    width: 90%;
    height: 100%;
    .tabBox {
      width: 100%;
      padding: 20rpx 0;
      display: flex;
      flex-direction: column;
      //多添件筛选
      // > .condition {
      //   width: 100%;
      //   display: flex;
      //   flex-direction: column;
      //   justify-content: space-between;
      //   > .conditionTop {
      //     width: 100%;
      //     display: flex;
      //     justify-content: space-between;
      //     padding: 10rpx;
          
      //   }
      //   > .conditionCon {
      //     width: 100%;
      //     display: flex;
      //     flex-direction: column;
      //     >.area{
      //       width: 100%;
      //       flex-wrap: wrap;
      //       >span{
      //         padding: 10rpx 15rpx;
      //         margin: 6rpx 10rpx;
      //       }
      //     }
      //   }
      // }
      // 优惠楼盘
      > .cate {
        display: flex;
        justify-content: space-between;
        span {
          padding: 10rpx 20rpx;
          font-size: 26rpx;
          color: #999;
          border: 1px solid #999;
        }
        .active {
          color: red;
          border: 1px solid red;
        }
      }
    }
    //数据列表
    > .newItem {
      width: 100%;
      height: 240rpx;
      margin: 20rpx 0;
      display: flex;
      border-bottom: 1px solid #999;
      //左侧盒子
      > .newItemL {
        width: 240rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 200rpx;
          height: 200rpx;
          border-radius: 20rpx;
        }
      }
      //右侧盒子
      > .newItemR {
        flex: 1;
        display: flex;
        flex-direction: column;
        > div {
          padding: 10rpx;
        }
        //楼盘
        > .title {
          display: flex;
          justify-content: space-between;
          //在售
          .status_name {
            padding: 6rpx 10rpx;
            background: rgb(92, 196, 135);
            color: #fff;
            font-size: 20rpx;
          }
          //待售
          .status_name2 {
            padding: 6rpx 10rpx;
            background: rgb(30, 182, 241);
            color: #fff;
            font-size: 20rpx;
          }
        }
        //价格
        > .price {
          color: red;
        }
        //区域
        .areaname {
          font-size: 20rpx;
          color: #999;
        }
        //标签
        .build_type {
          span {
            font-size: 20rpx;
            border: 1px solid #999;
            padding: 4rpx 10rpx;
            margin-right: 10rpx;
            color: #999;
          }
        }
      }
    }
  }
}
</style>